<template>
  <div
    class="container"
    :style="{
      'grid-template-columns': isHiddenMenu ? '1fr' : '1fr 320px',
    }">
    <FloatingButtons
      :key="isHiddenMenu"
      :actions="actions"
      :init-expand="true"
      @edit="router.push('/blogs/editor/' + props.id)"
      @delete="showDialog = true"
      @showMenu="showMenu" />
    <BlogPreview :blog="blog" @update-menu="updateMenu" />

    <BlogMenu
      v-if="!isHiddenMenu"
      :toc="blog.toc"
      :active-id="activeId"
      :active-parent-id="activeParentId"
      @hide-menu="hiddenMenu" />
  </div>
  <DialogCard v-if="showDialog" dialog-title="删除博客">
    <template v-slot:body>
      <h3 style="color: black">确认删除吗？</h3>
    </template>
    <template v-slot:footer>
      <Button
        text="确认"
        @click-it="
          () => {
            DeleteBlog(props.id, () => {
              showDialog = false
              router.push('/home')
            })
          }
        "></Button>
      <Button text="取消" @click-it="showDialog = false"></Button>
    </template>
  </DialogCard>
</template>

<script setup>
import { onMounted, ref } from "vue"
import { GetBlogDetail, DeleteBlog, UpdateBlogView } from "@/apis/allAPI/blog"
import { useRouter } from "vue-router"
import appStore from "@/stores"
import BlogPreview from "@/views/blog/BlogPreview.vue"
import FloatingButtons from "@/components/FloatingButtons.vue"
import DialogCard from "@/components/Dialog.vue"
import BlogMenu from "@/views/blog/BlogMenu.vue"
import Button from "@/components/Button.vue"
import { storeToRefs } from "pinia"

const props = defineProps({
  id: String,
})
const { switchTipStatus } = appStore.homeviewStore
const { firstBlogs } = storeToRefs(appStore.userStore)
const router = useRouter()
const blog = ref({})
const isHiddenMenu = ref(false)
const activeId = ref("")
const activeParentId = ref("")

const updateMenu = (a_id, p_id) => {
  activeId.value = a_id
  activeParentId.value = p_id
}

const showDialog = ref(false)
const actions = ref([
  { name: "edit", icon: "fas fa-edit", tooltip: "编辑文章" },
  { name: "delete", icon: "fas fa-trash", tooltip: "删除文章" },
])

const hiddenMenu = () => {
  actions.value.push({ name: "showMenu", icon: "fas fa-eye", tooltip: "显示目录" })
  isHiddenMenu.value = !isHiddenMenu.value
  switchTipStatus({ level: "info", msg: "已隐藏博客目录！" })
}

const showMenu = () => {
  actions.value.pop()
  isHiddenMenu.value = !isHiddenMenu.value
}

onMounted(() => {
  GetBlogDetail(props.id, (rData) => {
    blog.value = rData

    if (!firstBlogs.value.includes(props.id)) {
      firstBlogs.value.push(props.id)
      UpdateBlogView(props.id, () => {
        blog.value.view_nums += 1
      })
    }
  })
})
</script>

<style scoped>
.container {
  max-width: 1400px;
  margin: 60px auto;
  display: grid;
  /* grid-template-columns: 1fr 320px; */
  gap: 35px;
  padding: 0 30px;
}

/* 响应式设计 */
@media (max-width: 992px) {
  .container {
    grid-template-columns: 25% 70%;
    gap: 5%;
  }
}

@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .editor-dialog {
    width: 95%;
    height: 85vh;
  }
}

@media (max-width: 480px) {
  .container {
    margin: 0 10px;
  }
}
</style>
